<template>
  <div>
    <a-card :bordered="false" style="margin-top: 10px">
    <div>指导专业录入</div>
      <a-form :form="form">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="招生单位" :labelCol="{span: 6,offset: 1}" :wrapperCol="{span: 16, offset: 1}">
              <a-select labelInValue @change="yxChange" v-decorator="[
                    'zdzyssyxdm',
                    {
                      rules: [{ required: false, message: '请选择招生单位!' }],
                    }
                  ]" showSearch :filterOption="filterOption">
                <a-select-option v-for="i in yx" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="专业层次" :labelCol="{span: 8,offset: 1}" :wrapperCol="{span: 14, offset: 1}">
              <a-select @change="zyccChange" labelInValue v-decorator="[
                    'zyccm',
                    {
                      rules: [{ required: false, message: '请选择专业层次!' }],
                    }
                  ]">
                <a-select-option v-for="(i,index) in TYPE0353" :key="index" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="指导专业" :labelCol="{span: 8,offset: 1}" :wrapperCol="{span: 14, offset: 1}">
              <a-select labelInValue v-decorator="[
                    'zdzym',
                    {
                      rules: [{ required: false, message: '请选择指导专业!' }],
                    }
                  ]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in zyList" :key="i.id" :value="i.zyh">{{ i.zyh}} {{ i.zymc }}</a-select-option>
                </a-select>
            </a-form-item>
          </a-col>
          <a-button type="primary" style="margin-left: 20px;;" @click="addItem" :loading="loadingAdd">添加</a-button>
          <a-button type="primary" @click="batchDelete">删除</a-button>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :dataSource="dszdzyList"
        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
        size="middle"
        :pagination="false"
        :scroll="{ y: 240 }"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="zdzy" slot-scope="text, record">{{ record.zymc }}</span>
      </a-table>
    </a-card>

    <a-card :bordered="false" style="margin-top: 10px">
      <div v-for="(zy, index) in dszdzyList" :key="index">
        <div class="research-title">
          {{ zy.yxmc }} --- {{ zy.zymc }}（{{ zy.zyccmc }}）的研究方向：
        </div>
        <div>
          <a-checkbox-group :options="zy.researchList" v-model="zy.dsyjfxList" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['yx'],
  data () {
    return {
      loadingAdd: false,
      zyList: [],
      dszdzyList: [],
      columns: [
        {
          title: '序号',
          width: 100,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '院系',
          dataIndex: 'yxmc'
        },
        {
          title: '指导专业',
          // dataIndex: 'zymc',
          scopedSlots: { customRender: 'zdzy' }
        },
        {
          title: '专业层次',
          width: 100,
          dataIndex: 'zyccmc'
        }
      ],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0353: state => state.app['TYPE0353'] // 专业层次
    })
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0353')
    this.$store.dispatch('app/sysInfo')
  },
  methods: {
    yxChange (code) {
      this.form.setFieldsValue({zdzym: {}})
      let zycc = this.form.getFieldValue('zyccm')
      if (code && zycc) {
        this.$api.base.majorAll({lsdwh: code.key, zycc: zycc.key}).then(res => {
          this.zyList = res.data
        })
      } else {
        this.zyList = []
      }
    },
    zyccChange(code) {
      this.form.setFieldsValue({zdzym: ''})
      let lsdwh = this.form.getFieldValue('zdzyssyxdm')
      if (code && lsdwh) {
        this.$api.base.majorAll({lsdwh: lsdwh.key, zycc: code.key}).then(res => {
          this.zyList = res.data
        })
      } else {
        this.zyList = []
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    batchDelete () {
      this.dszdzyList = this.dszdzyList.filter(item => {
        return !this.selectedRows.includes(item)
      })
      this.selectedRows = []
      this.selectedRowKeys = []
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    addItem () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          // let dszdzy = {
          //   yxmc: this.yx.find(item => {
          //     return String(item.dwh) === String(values.zdzyssyxdm)
          //   }).dwmc,
          //   zymc: this.zyList.find(item => {
          //     return String(item.zyh) === String(values.zdzym)
          //   }).zymc,
          //   zyccmc: this.TYPE0353.find(item => {
          //     return String(item.code) === String(values.zyccm)
          //   }).name,
          //   ...values
          // }
          this.loadingAdd = true
          let dszdzy = {
            yxmc: values.zdzyssyxdm.label,
            zdzyssyxdm: values.zdzyssyxdm.key,
            zymc: values.zdzym.label,
            zdzym: values.zdzym.key,
            zyccmc: values.zyccm.label,
            zyccm: values.zyccm.key
          }
          // let dszdzyList = this.dszdzyList.map(item => {
          //   let dszdzy = Object.assign({}, item)
          //   delete dszdzy.researchList
          //   return JSON.stringify(dszdzy)
          // })
          let exist = this.dszdzyList.find(item => {
            return (String(item.zyccm) === String(values.zyccm.key) && String(item.zdzym) === String(values.zdzym.key))
          })
          if (!exist) {
            let {data} = await this.$api.base.researchListByDistinct({
              ssyxm: dszdzy.zdzyssyxdm,
              sszym: dszdzy.zdzym,
              zsxn: this.systemInfo.masterAdmissionYear,
              zyccm: dszdzy.zyccm
            })
            let researchList = data.map(item => {
              return {
                value: item.yjfxm,
                label: item.yjfxmc
              }
            })
            dszdzy.researchList = researchList
            this.dszdzyList.push(dszdzy)
          }
          this.loadingAdd = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.research-title{
  padding: 10px;
  background-color: #fafafa;
  font-weight: 500;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}
</style>
